<template>
  <div class="charging-record-management">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2>充电记录管理</h2>
        <el-button type="primary" @click="handleRefresh">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>

      <!-- 统计卡片 -->
      <div class="statistics-cards">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ statistics.totalRecords }}</div>
                <div class="stat-label">总充电记录</div>
              </div>
              <el-icon class="stat-icon"><Document /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ statistics.todayRecords }}</div>
                <div class="stat-label">今日充电</div>
              </div>
              <el-icon class="stat-icon"><Calendar /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ statistics.totalAmount }}</div>
                <div class="stat-label">总充电金额</div>
              </div>
              <el-icon class="stat-icon"><Money /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ statistics.totalPower }}</div>
                <div class="stat-label">总充电电量</div>
              </div>
              <el-icon class="stat-icon"><Lightning /></el-icon>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 搜索和筛选 -->
      <el-card class="search-card">
        <el-form :model="searchForm" inline>
          <el-form-item label="充电桩">
            <el-select v-model="searchForm.pileId" placeholder="选择充电桩" clearable>
              <el-option
                v-for="pile in chargingPileList"
                :key="pile.id"
                :label="pile.pileName"
                :value="pile.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="车辆">
            <el-input v-model="searchForm.plateNumber" placeholder="车牌号" clearable />
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 充电记录列表 -->
      <el-card class="table-card">
        <el-table 
          v-loading="tableLoading" 
          :data="filteredChargingRecordList"
          stripe
          border
        >
          <el-table-column prop="recordId" label="记录ID" width="120" />
          <el-table-column prop="pileName" label="充电桩名称" min-width="150" />
          <el-table-column prop="plateNumber" label="车牌号" width="120" />
          <el-table-column prop="startTime" label="开始时间" width="180" />
          <el-table-column prop="endTime" label="结束时间" width="180" />
          <el-table-column prop="duration" label="充电时长" width="120">
            <template #default="{ row }">
              {{ formatDuration(row.duration) }}
            </template>
          </el-table-column>
          <el-table-column prop="powerConsumed" label="充电电量" width="120">
            <template #default="{ row }">
              {{ row.powerConsumed }} kWh
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="充电金额" width="120">
            <template #default="{ row }">
              ¥{{ row.amount }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getTagType(getStatusTagType(row.status))">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="handleViewDetail(row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { showMessage, getTagType } from '@/utils/message'
import { Refresh, Document, Calendar, Money, Lightning, Search } from '@element-plus/icons-vue'


// 作者：Wu.Liang

// 响应式数据
const tableLoading = ref(false)

// 静态数据
const allChargingRecordList = ref([
  {
    recordId: 'CR001',
    pileName: 'A区充电桩01',
    plateNumber: '京A12345',
    startTime: '2025-01-21 10:00:00',
    endTime: '2025-01-21 12:00:00',
    duration: 7200,
    powerConsumed: 15.5,
    amount: 31.00,
    status: 1
  },
  {
    recordId: 'CR002',
    pileName: 'A区充电桩02',
    plateNumber: '京B67890',
    startTime: '2025-01-21 14:30:00',
    endTime: '2025-01-21 17:30:00',
    duration: 10800,
    powerConsumed: 22.8,
    amount: 45.60,
    status: 1
  },
  {
    recordId: 'CR003',
    pileName: 'B区充电桩01',
    plateNumber: '京C11111',
    startTime: '2025-01-21 09:00:00',
    endTime: null,
    duration: 0,
    powerConsumed: 0,
    amount: 0,
    status: 2
  },
  {
    recordId: 'CR004',
    pileName: 'B区充电桩02',
    plateNumber: '京D22222',
    startTime: '2025-01-20 16:00:00',
    endTime: '2025-01-20 19:00:00',
    duration: 10800,
    powerConsumed: 18.2,
    amount: 36.40,
    status: 1
  },
  {
    recordId: 'CR005',
    pileName: 'C区充电桩01',
    plateNumber: '京E33333',
    startTime: '2025-01-21 08:00:00',
    endTime: '2025-01-21 11:00:00',
    duration: 10800,
    powerConsumed: 20.5,
    amount: 41.00,
    status: 1
  }
])

const chargingPileList = ref([
  { id: 1, pileName: 'A区充电桩01' },
  { id: 2, pileName: 'A区充电桩02' },
  { id: 3, pileName: 'B区充电桩01' },
  { id: 4, pileName: 'B区充电桩02' },
  { id: 5, pileName: 'C区充电桩01' }
])

// 统计数据
const statistics = reactive({
  totalRecords: 156,
  todayRecords: 12,
  totalAmount: 2345.67,
  totalPower: 1234.56
})

// 搜索表单
const searchForm = reactive({
  pileId: null,
  plateNumber: '',
  dateRange: []
})

// 分页配置
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
})

// 过滤后的充电记录列表
const filteredChargingRecordList = computed(() => {
  let filtered = [...allChargingRecordList.value]
  
  // 充电桩过滤
  if (searchForm.pileId) {
    const pile = chargingPileList.value.find(p => p.id === searchForm.pileId)
    if (pile) {
      filtered = filtered.filter(item => item.pileName === pile.pileName)
    }
  }
  
  // 车牌号过滤
  if (searchForm.plateNumber) {
    filtered = filtered.filter(item => 
      item.plateNumber.toLowerCase().includes(searchForm.plateNumber.toLowerCase())
    )
  }
  
  // 时间范围过滤
  if (searchForm.dateRange && searchForm.dateRange.length === 2) {
    filtered = filtered.filter(item => {
      const startDate = new Date(item.startTime)
      const rangeStart = new Date(searchForm.dateRange[0] || '')
      const rangeEnd = new Date(searchForm.dateRange[1] || '')
      return startDate >= rangeStart && startDate <= rangeEnd
    })
  }
  
  // 更新分页总数
  pagination.total = filtered.length
  
  // 分页
  const start = (pagination.current - 1) * pagination.size
  const end = start + pagination.size
  return filtered.slice(start, end)
})

// 页面加载时初始化
onMounted(() => {
  pagination.total = allChargingRecordList.value.length
})

// 搜索
const handleSearch = () => {
  pagination.current = 1
  showMessage({ type: 'success', message: '搜索完成' })
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    pileId: null,
    plateNumber: '',
    dateRange: []
  })
  pagination.current = 1
  showMessage({ type: 'success', message: '重置完成' })
}

// 刷新
const handleRefresh = () => {
  showMessage({ type: 'success', message: '数据已刷新' })
}

// 查看详情
const handleViewDetail = (row: any) => {
  showMessage({ type: 'success', message: `查看充电记录详情：${row.recordId}` })
}

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.size = size
  pagination.current = 1
}

const handleCurrentChange = (current: number) => {
  pagination.current = current
}

// 格式化时长
const formatDuration = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  return `${hours}小时${minutes}分钟`
}

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  const statusMap: Record<number, string> = {
    1: 'success',   // 已完成
    2: 'warning',   // 充电中
    3: 'danger'     // 异常
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    1: '已完成',
    2: '充电中',
    3: '异常'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped lang="scss">
.charging-record-management {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    color: #303133;
  }
}

.statistics-cards {
  margin-bottom: 20px;

  .stat-card {
    .stat-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .stat-number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 14px;
        color: #909399;
      }
    }

    .stat-icon {
      font-size: 32px;
      color: #409EFF;
      margin-left: 16px;
    }
  }
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style> 